<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .box button {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            font-size: 30px;
        }

        .content {
            width: 300px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 内联事件处理 -->
        <button @click="count++">点击加 1 - {{count}}</button>
        <!-- 方法事件处理 -->
        <button @click="add">点击加 1 - {{count}}</button>
        <!-- 事件传递参数 -->
        <button @click="addNum(5)">点击加指定数 - {{count}}</button>


        <!-- .self 是将事件指明只有点击自身的时候才会被触发，不会被冒泡所影响 -->
        <!-- <div class="box" @click.self="boxClick"> -->

        <!-- .capture 触发内部事件的时候，先执行外部处理事件 -->
        <!-- <div class="box" @click.capture="boxClick"> -->

        <div class="box" @click="boxClick">
            外部盒子
            <!-- .stop 是修饰符，该修饰符作用是阻止冒泡 -->
            <!-- <button @click.stop="btnClick">内部按钮</button> -->

            <!-- .prevent 该修饰符是用来阻止默认事件用的 -->
            <!-- <a href="https://www.baidu.com" @click.prevent="btnClick">点击进入百度</a> -->

            <!-- .once 该指令是用来定义只能执行一次操作，相当于该事件是一次性的 -->
            <!-- <button @click.once="btnClick">内部按钮</button> -->

            <button @click="btnClick">内部按钮</button>
        </div>

        <!-- .passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。 -->
        <div class="content" @scroll.passive="onScroll">
            在中国男篮历史长河中，有许多令人铭记的硬朗球员，他们的奋勇拼搏和出色技术为中国篮坛增光添彩。今天，让我们一同走进中国男篮的8位硬汉之中，其中胡金秋当之无愧是其中的佼佼者。除了胡金秋之外，浙江队也为中国男篮献上了三位宝贵的球员，他们分别是XXX、XXX、XXX。这三位来自浙江队的球员在球场上展现出了非凡的实力和意志，为中国男篮的荣耀而战。此外，还有两位新秀正以顽强的拼搏精神全力以赴，他们分别是XXX和XXX。这两位新秀展现出了巨大的潜力和实力，他们的成长和进步将为中国男篮的未来增添更多希望。总的来看，这8位中国男篮硬汉用他们无与伦比的毅力和热爱诠释了篮球精神的真谛。他们在球场上的技艺和顽强意志无疑将成为广大篮球爱好者学习的楷模。希望这篇文章能深深吸引着您，言辞生动、简洁明了。如果您对中国男篮的传奇故事感兴趣，还有更多精彩篮球故事等待您的发掘。中国男篮的光荣历史需要您去一探究竟。
            在中国男篮历史长河中，有许多令人铭记的硬朗球员，他们的奋勇拼搏和出色技术为中国篮坛增光添彩。今天，让我们一同走进中国男篮的8位硬汉之中，其中胡金秋当之无愧是其中的佼佼者。除了胡金秋之外，浙江队也为中国男篮献上了三位宝贵的球员，他们分别是XXX、XXX、XXX。这三位来自浙江队的球员在球场上展现出了非凡的实力和意志，为中国男篮的荣耀而战。此外，还有两位新秀正以顽强的拼搏精神全力以赴，他们分别是XXX和XXX。这两位新秀展现出了巨大的潜力和实力，他们的成长和进步将为中国男篮的未来增添更多希望。总的来看，这8位中国男篮硬汉用他们无与伦比的毅力和热爱诠释了篮球精神的真谛。他们在球场上的技艺和顽强意志无疑将成为广大篮球爱好者学习的楷模。希望这篇文章能深深吸引着您，言辞生动、简洁明了。如果您对中国男篮的传奇故事感兴趣，还有更多精彩篮球故事等待您的发掘。中国男篮的光荣历史需要您去一探究竟。
        </div>


        <input @keyup.enter="submit" />

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 100
            }
        },
        methods: {
            add() {
                this.count++
                // event 事件函数中自带，无需传递和接收
                console.log(event);
            },
            addNum(val) {
                this.count += val
                console.log(event);
            },
            boxClick() {
                console.log('box 被点击了');
            },
            btnClick() {
                console.log('内部按钮被点击了');
            },
            onScroll() {
                console.log('滚动了');
            },
            submit() {
                console.log('表单提交');
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>